<template>
    <s-table :dataSource="state.dataSource" layout="column">
         <s-table-column prop="id" label="ID"/>
         <s-table-column prop="name" label="名字"/>
         <s-table-column prop="age" label="年龄"/>
         <s-table-column prop="phone" label="电话号码" />
         <s-table-column prop="hobby" label="爱好"/>
    </s-table>

    <br/>
    <br/>

    <s-table :dataSource="state.dataSource" :header-style="{textAlign:'center',width:'100px'}" align="center">
         <s-table-column prop="name" label="名字"/>
         <s-table-column prop="age" label="年龄"/>
         <s-table-column prop="phone" label="电话号码"/>
         <s-table-column prop="hobby" label="爱好"/>
    </s-table>

    <br/>
    <br/>

    <s-table :dataSource="state.dataSource" layout="column">
         <s-table-column prop="id" label="ID"/>
         <s-table-column prop="name" label="名字"/>
         <s-table-column prop="age" label="年龄"/>
         <s-table-column prop="phone" label="电话号码">
          <template #default="defaultProps">
               <s-input
                  :value="defaultProps.value"
                  name="phone"
                  :rules="[
                     { type: 'required', message: '电话号码不能为空' },
                  ]"
                  @update="update($event, defaultProps.data.id)"
               />
            </template>
         </s-table-column>
         <s-table-column prop="hobby" label="爱好"/>
    </s-table>

 </template>

<script lang="ts" setup>
import { reactive } from "vue"
import { STable, STableColumn, SInput } from "@/components"
import { BaseForm } from "@types"

const state = reactive({
  dataSource: [
    {
      id: 1,
      name: "小明",
      age: 98,
      hobby: "游泳",
      phone: "123456"
    },
    {
      id: 2,
      name: "小红",
      age: 55,
      hobby: "跑步",
      phone: "954623"
    },
    {
      id: 3,
      name: "小黑",
      age: 32,
      hobby: "打羽毛球",
      phone: "654513"
    }
  ]

})

const update = (params:BaseForm, id:number) => {
  state.dataSource = state.dataSource.map((item) => {
    if (item.id === id) {
      return {
        ...item,
        [params.name]: params.value
      }
    } else {
      return item
    }
  })
}
</script>

 <style scoped lang="less">
 </style>
